<!-- 失物招领详细信息 -->
<template>
	<view id="body">
		<view class="order">
			<!-- 头部样式 -->
			<view class="top">
				<text class="fk">{{flagetext}}</text>
			</view>
			<!-- 订单内容 -->
			<view class="order-conent">
				<view>
					<text class="order-id">订单编号:</text>
					<text class="idtext">{{order.orderid}}</text>
					<text class="order-id-fz" @click="copy">复制</text> 
				</view>
				<view>
					<text class="order-title">订单类型:</text>
					<text class="order-title-text">{{ordertype}}</text>
				</view>
				<view>
					<text class="order-title">订单标题:</text>
					<text class="order-title-text">{{order.title}}</text>
				</view>
				<view> 
					<text class="order-conent-ct">订单内容:</text>
					<text class="order-conentct-text">{{order.content}}</text>
				</view>
				<view>
					<text class="order-remarks">订单备注:</text>
					<text class="order-remarks-text">{{order.remarks}}</text>
				</view>
				<!-- 订单信息 -->
					<view>
						<text class="order-user">发布用户:</text>
						<text class="username">{{order.issueUserName}}</text>
					</view>
					<view>
						<text class="order-time">下单时间:</text>
						<text class="createtime">{{order.createTime}}</text>
					</view>
					<view v-if="order.ordertypeid == 5"> 
						<text class="order-time">物品当前位置:</text>
						<text class="createtime">{{weizitext}}</text>
					</view>
					<view>
						<text class="zf-time">是否有偿:</text>
						<text class="zftype" :style="{color:paidflage?'#3c9cff':'#ff5500'}">{{paidftext}}</text>
					</view> 
					<view v-if="paidflage">  
						<text class="zf-time">是否支付:</text>
						<text class="zftype" :style="{color:flage?'#3c9cff':'#ff5500'}">{{paytext}}</text>
					</view> 
					<!-- 按钮 -->
					<view style="padding-bottom: 40rpx;" v-if="paidflage">
						<text class="pricetext">订单金额:</text> 
						<text class="price">{{order.price}}元</text>
					</view>
				<!-- 图片信息 -->
				<view style="padding-bottom: 20rpx;margin-left: 40rpx;margin-right: 40rpx;">
					<u-divider text="图片信息" textColor="#3c9cff" lineColor="#3c9cff"></u-divider>
				</view>
				<view class="order-imglist"> 
					<view>
						<image :src="item" mode="" class="imglist" v-for="(item,index) in imagesList" :key="index" @tap="ViewImage(index)" @longpress="deleteImgList(index)"></image>
					</view>
				</view>
				<view class="bj" @click="bj" v-if="order.state == 0">
					<text class="t-icon t-icon-daochu1024-30" style="width: 40rpx;height: 40rpx;"></text>
				</view>
			</view>
		</view>
		<!-- 付款按钮 -->
		<view class="fabubutton" v-if="paidflage & !flage">
			<u-button
				text="付             款"
				size="normal"
				type="primary"
				@click="fkclick"
			></u-button>
		</view>
		<view class="fabubutton1" v-if="!paidflage">
			<u-button
				text="返  回  失  物  招  领  中  心"
				size="normal"
				type="primary"
				@click="toswzl"
			></u-button>
		</view>
		<!-- 订单内容模态框 -->
		<view class="bjmoda2">
			<u-modal :show="bjIsTrue" :showConfirmButton="false" closeOnClickOverlay="true" @close="close" >
				<view class="bb">
					<!-- 标题 -->
					<uni-section class="mb-10" title="发布标题" type="line" titleColor="#909399"></uni-section>
					<view class="title-input">
						<u--textarea placeholder="请输入发布标题" v-model="order.title" height="32rpx" count="true"  maxlength=10></u--textarea>
					</view> 
					<!-- 内容 -->
					<uni-section class="mb-10" title="发布内容" type="line" titleColor="#909399"></uni-section>
					<view class="content-input">
						<u--textarea v-model="order.content" placeholder="请输入发布内容"  count="true"  maxlength=400 ></u--textarea>
					</view>
					<!-- 备注信息 -->
					<uni-section class="mb-10" title="备注信息(选填)" type="line" titleColor="#909399"></uni-section>
					<view class="beizhu-input">
						<u--textarea v-model="order.remarks" placeholder="请输入发布内容"  count="true"  maxlength=100 ></u--textarea>
					</view>
				</view>
			</u-modal>
		</view>
	</view>
</template>

<script>
	import {uploadImgToOss,deleteImg} from "../static/service/aliyoss/config.js"
	import {http} from '../static/service/requestAddress/rtas.js'
	export default {
		data() {
			return {
				flagetext:"以发布",
				ordertype:"",//订单类型
				paidflage:false,//是否有偿
				paidftext:"否",//是否有偿文本
				flage:false,//是否支付
				paytext:"否",//是否支付文本
				weizitext:"",//物品当前所在位置文本
				type:["电子产品","生活用品","学习用品","其他"],//订单的分类类型
				weizhi:["本人代管","遗失处","其他"],
				bjIsTrue:false,//编辑模态框标记
				imagesList: [],//订单图片信息
				order: {
					orderid:"",//订单id
					createTime:"",//订单创建时间
					title:"", //标题
					content:"",//内容
					remarks:"",//订单备注
					price:0,//订单价格
					hide_name:0,//是否匿名
					paid:0,//是否有偿
					issueUser:"",//发布用户id
					issueUserName:"",//发布用户名称
					ordertypeid:"",//订单所属类型id
					state:0,//订单状况
					belongUser:"",//接单用户id
					weizhi:0,//物品当前位置
					ordertypeid:5,//订单所属类型
				},
			}
		},
		methods:{
			onLoad(options){ //页面接收信息
				var orderData = JSON.parse(options.data) 
				console.log("订单页面接收的数据是：" + JSON.stringify(options.data));
				//订单图片信息
				if(orderData.orderImg == ""){
					this.imagesList = []
				}else{
					this.imagesList = orderData.orderImg.split(",") 
				}
				this.order.orderid = orderData.id
				this.order.createTime = orderData.createTime
				this.order.title = orderData.title
				this.order.content = orderData.content	
				this.order.remarks = orderData.remarks
				this.order.issueUser = orderData.issueUser
				this.order.issueUserName = orderData.issueUserName
				this.order.price = orderData.price
				this.order.ordertypeid = orderData.ordertypeid
				this.order.state = orderData.state
				this.belongUser = orderData.belongUser
				if(orderData.hideName == 1){
					this.order.issueUserName = "匿名"
				}
				//订单类型
				this.ordertype = this.type[orderData.type -1] 
				//订单位置
				this.weizitext = this.weizhi[orderData.weizhi]
				this.order.weizhi = orderData.weiz 
				//是否有偿
				if(orderData.paid == 0){
					this.paidflage = false
				}else if(orderData.paid == 1){
					this.paidflage = true
					this.paidftext = '是'
				}
				this.order.paid = orderData.paid
				//是否支付
				if(this.order.state != 0){
					const a = ["以发布","认领中","已认领","问题订单"]
					this.flagetext = a[this.order.state]
					//已付款
					if(this.order.state == 1 | this.order.state == 2| this.order.state == 3){
						this.flage= true
						this.paytext = "是"
					}
				}
			},
			// 复制订单
			copy(){
				 uni.setClipboardData({
				    data:this.order.orderid+"",
				    success: function (res) {
				        uni.getClipboardData({
				        success: function (res) {
				            uni.showToast({
				                title: "复制成功",
				                icon: 'none',
				            })
				        },
				        })
				    },
				    })
			},
			//预览图片
			ViewImage(index) {
				uni.previewImage({
					urls: this.imagesList,
					current: index
				});
			},
			//图片长按删除
			async deleteImgList(index){
				//逻辑判断是否有删除图片权限
				var user = JSON.parse(uni.getStorageSync('user'))
				if(user.id = this.order.issueUser){
					var list = []
					for(var i = 0;i<this.imagesList.length;i++){
						if(index == i){
							uni.showLoading({
								title:"正在删除中",
								mask: true
							})
							await deleteImg(this.imagesList[i])
							uni.hideLoading()
							continue
						}else{
							list.push(this.imagesList[i])
						}
					}
					this.imagesList = list
				}else{
					uni.$u.toast("发布用户才有修改权限")
				}
			},
			//编辑信息模态框点击事件
			bj(){
				this.bjIsTrue = true
			},
			close(){
				this.bjIsTrue = false
			},
			fkclick(){
					//封装请求对象
					var wxp = {
						//订单id
						orderid: this.order.orderid,
						//获取的openid
						openid:"",
						//订单名称
						 name:this.order.title,
						//订单价格
						 price:this.order.price
					}
					//封装支付完成后的请求链接
					//请求参数数组
					var sendpost = [
						http+"lostarticle",
						http+"seekarticle",
					]
					var user = JSON.parse(uni.getStorageSync('user'))
					var url = sendpost[(this.order.ordertypeid) - 5]+"/"+this.order.orderid+"/"+user.id //封装付款后的请求数据
					console.log("请求地址："+ this.order.ordertypeid+"url:"+url)
					uni.login({
						success(res) {
							uni.request({
								url: http+"wxlogin/"+res.code,
								method:"GET",
								success(res) {
									var openid = res.data.date
									wxp.openid = openid
									uni.request({
										url:http+"wxpay",
										data: wxp, 
										method:"POST",
										success(res) {
											var data = res.data.date
											uni.requestPayment({
												// "provider": data.provider,    //支付类型-固定值
												"timeStamp": data.timeStamp, // 时间戳（单位：秒）
												"nonceStr": data.nonceStr, // 随机字符串
												"package": data.packAge, // 固定值
												"signType": data.signType, //固定值
												"paySign": data.paySign, //签名
												    success(res) {
														//修改订单状态
														uni.request({
															url: url,
															method:"PUT",
															complete:(res) =>{
																if(res.data.code == 20041){
																	uni.$u.toast("支付成功！")
																	setTimeout(()=>{
																		//支持成功后跳转到已支付订单里
																		uni.redirectTo({
																			url: "/pages/massage/myorder"
																		})
																	}, 1000);
																	
																}else{
																	console.log("修改失败")
																}
															}
														})
													}, 
												    fail(e) { 
														uni.$u.toast("支付失败！")
														console.log("支付失败！"+url)
													}
											})
										},
										fail(res) {
											uni.$u.toast("获取openid失败！")
										}
									})
								},
								fail(res) {
									uni.$u.toast("获取code失败！")
								}
							})
						},
						fail(res) {
							uni.$u.toast("获取登录信息失败！")
						}
					})
			},
			//返回按钮
			toswzl(){
				uni.redirectTo({
					url:"/shiwuzhaoling/swzlindex"
				})
			}
		}
	}
</script> 

<style>
	@import url("../static/css/componentsCss/shiwuzhaoling/swzlOrderInfo.css");
	page {
		background-color: #f0f0f0;
	}
</style>